<template>
  <div>
    <el-table
      :data="usersInfo"
      style="width: 100%">
      <el-table-column
        label="账号"
        prop="account">
      </el-table-column>
      <el-table-column
        label="昵称"
        prop="nickName">
      </el-table-column>
      <el-table-column
        label="最后上线时间"
        prop="lastDate">
      </el-table-column>
      <el-table-column
        label="邮箱"
        prop="email">
      </el-table-column>
      <el-table-column
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            @keyup.enter.native="HandlerSearch"/>
        </template>
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.isDelete"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            v-else
            disabled
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
            v-if="scope.row.isDelete !== 1"
            size="mini"
            type="danger"
            :loading="scope.row.delLoading"
            @click="handleDelete(scope.$index, scope.row)">注销
          </el-button>
          <el-button
            v-else
            size="mini"
            type="success"
            disabled>已注销
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--  修改信息弹框  -->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="userInfoForm" :inline="true">
        <el-form-item label="昵称" :label-width="formLabelWidth">
          <el-input style="width: auto;" maxlength="10" show-word-limit v-model="userInfoForm.nickname"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input style="width: auto;" maxlength="11" show-word-limit v-model="userInfoForm.mobile"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="注册时间" :label-width="formLabelWidth">
          <el-input style="width: auto;" disabled show-word-limit v-model="userInfoForm.regdate"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="修改时间" :label-width="formLabelWidth">
          <el-input style="width: auto;" disabled show-word-limit v-model="userInfoForm.updatedate"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="在线时长" :label-width="formLabelWidth">
          <el-input style="width: auto;" disabled show-word-limit v-model="userInfoForm.online"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="userInfoForm.sex">
            <el-radio label="1">男</el-radio>
            <el-radio label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <br>
        <el-button
          style="margin-left: 120px"
          type="danger"
          @click="restPassword">
          重置密码
        </el-button>
<!--        <el-dialog-->
<!--          title="提示"-->
<!--          :visible.sync="restPasswordVisible"-->
<!--          width="30%"-->
<!--          append-to-body>-->
<!--          <span>确定要重置密码？</span>-->
<!--          <span slot="footer" class="dialog-footer">-->
<!--            <el-button @click="restPasswordVisible = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="restPassword">确 定</el-button>-->
<!--          </span>-->
<!--        </el-dialog>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editConfirm">确 定</el-button>
      </div>
    </el-dialog>

    <!--  分页  -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="size"
        :page-sizes="[2, 5, 10]"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getUsers, delUser, restPwd, updateUserInfo, getUserInfo } from '@/api/admin/permission/userManager'

  export default {
    data() {
      return {
        usersInfo: [],
        search: undefined,
        userInfoForm: {},
        total: 0,
        size: 10,
        currentPage: 1,
        regDates: undefined,
        nickname: undefined,
        account: undefined,
        email: undefined,
        mobile: undefined,
        dialogFormVisible: false,
        formLabelWidth: '120px',
      }
    },
    methods: {
      handleEdit(index, row) {
        // console.info(row)
        getUserInfo(row.id).then(res => {
          this.userInfoForm = res.data
          this.userInfoForm.regdate = this.parseTime(this.userInfoForm.regdate)
          this.userInfoForm.updatedate = this.parseTime(this.userInfoForm.updatedate)
          this.dialogFormVisible = true
        }).catch(err => {
          console.info(err)
        })
      },
      handleDelete(index, row) {
        const flag = confirm('确定要注销该账号码？')
        const reqData = { ids: row.id }
        if (flag) {
          this.usersInfo[index].delLoading = true
          delUser(reqData).then(response => {
            this.$message.success(response.message)
            this.usersInfo[index].isDelete = 1
            this.usersInfo[index].delLoading = false
          }).catch(error => {
            console.info('error', error)
          })
        }
      },
      HandlerSearch() {
        this.nickname = this.search
        // this.account = this.search
        this.currentPage = 1
        this.getUsersInfo()
      },
      handleSizeChange(size) {
        this.size = size
        this.getUsersInfo()
      },
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.getUsersInfo()
      },
      restPassword() {
        const flag = confirm("确定要重置"+this.userInfoForm.nickname+"的密码？")
        if (!flag){return}
        const reqData = { id: this.userInfoForm.id }
        restPwd(reqData).then(response => {
          this.$message.success('重置成功!')
        }).catch(error => {
          console.info(error)
        })
      },
      getUsersInfo() {
        const reqData = {
          offset: this.currentPage,
          limit: this.size
        }
        const reqBody = {
          regDates: this.regDates,
          columns: {
            nickname: this.nickname,
            mobile: this.mobile,
            email: this.email
          }
        }
        getUsers(reqData, reqBody).then(response => {
          const resData = response.data
          this.total = resData.total
          this.usersInfo = []
          resData.userInfo.forEach((item) => {
            const lastDate = this.$moment(item.lastdate).format('YYYY-MM-DD HH:mm:ss')
            const regDate = this.$moment(item.regdate).format('YYYY-MM-DD HH:mm:ss')
            const updateDate = this.$moment(item.updatedate).format('YYYY-MM-DD HH:mm:ss')
            const userInfo = {
              id: item.id,
              nickName: item.nickname,
              account: item.account,
              lastDate: lastDate,
              email: item.email,
              sex: item.sex,
              isDelete: item.isDelete,
              mobile: item.mobile,
              regDate: regDate,
              updateDate: updateDate,
              online: item.online,
              delLoading: false
            }
            this.usersInfo.push(userInfo)
          })
        }).catch(error => {
          console.info(error)
        })
      },
      editConfirm() {
        const item = this.userInfoForm
        const reqData = { id: item.id, nickname: item.nickname, mobile: item.mobile, sex: item.sex }
        const flag = confirm('确定要更新吗？')
        if (!flag) {
          return
        }
        updateUserInfo(reqData).then(response => {
          this.$message({
            message: response.message,
            type: 'success',
            duration: 2 * 1000
          })
          this.dialogFormVisible = false
          this.getUsersInfo()
        }).catch(error => {
          this.$message.error('更新失败' + error)
        })
      }
    },
    mounted() {
      this.getUsersInfo()
    }
  }
</script>
<style scoped>
  .block {
    text-align: center;
    margin: 20px;
  }
</style>
